<template>
  <div class="dashboard-container">
    <!-- 数据概览 -->
    <div class="header-section">
      <h3 class="section-title">
        数据概览
      </h3>
      <el-row
        :gutter="20"
        class="data-overview"
      >
        <!-- 交易金额卡片 -->
        <el-col :span="6">
          <el-card
            shadow="never"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                交易金额
              </div>
              <div class="card-value">
                {{ overviewData.transaction.value.toLocaleString() }}
              </div>
              <div class="card-footer">
                <div class="card-trend down">
                  <i class="el-icon-bottom" />
                  <span class="trend-value">0.4%</span>
                  <span class="trend-text">本月</span>
                  <span class="trend-value">1052元</span>
                </div>
                <div class="extra-info">
                  <span class="today-label">今日交易</span>
                  <span class="today-value">105元</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 用户量卡片 -->
        <el-col :span="6">
          <el-card
            shadow="never"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                用户量
              </div>
              <div class="card-value">
                17,584
              </div>
              <div class="card-footer">
                <div class="card-trend up">
                  <i class="el-icon-top" />
                  <span class="trend-value">0.52%</span>
                  <span class="trend-text">较上月</span>
                </div>
                <div class="extra-info">
                  <span class="today-label">今日签到用户</span>
                  <span class="today-value">67人</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 帖子数卡片 -->
        <el-col :span="6">
          <el-card
            shadow="never"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                帖子数
              </div>
              <div class="card-value">
                3,184
              </div>
              <div class="card-footer">
                <div class="card-trend up">
                  <i class="el-icon-top" />
                  <span class="trend-value">1.2%</span>
                  <span class="trend-text">较上月</span>
                </div>
                <div class="extra-info">
                  <span class="today-label">待审核</span>
                  <span class="today-value">10条</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 新增用户卡片 -->
        <el-col :span="6">
          <el-card
            shadow="never"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                新增用户
              </div>
              <div class="card-value">
                28
              </div>
              <div class="card-footer">
                <div class="card-trend down">
                  <i class="el-icon-bottom" />
                  <span class="trend-value">0.8%</span>
                  <span class="trend-text">较上月</span>
                </div>
                <div class="extra-info">
                  <span class="today-label">昨日数据</span>
                  <span class="today-value">15人</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能入口 -->
    <div class="section-container">
      <el-row
        :gutter="20"
        class="quick-actions"
      >
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('post')"
          >
            <i class="el-icon-document" />
            <div>帖子管理</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('circle')"
          >
            <i class="el-icon-circle-check" />
            <div>圈子管理</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('comment')"
          >
            <i class="el-icon-chat-line-round" />
            <div>评论管理</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('report')"
          >
            <i class="el-icon-warning" />
            <div>举报管理</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('message')"
          >
            <i class="el-icon-message" />
            <div>消息管理</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card
            shadow="hover"
            class="action-card"
            @click.native="navigateTo('visitor')"
          >
            <i class="el-icon-user" />
            <div>访客管理</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据统计 -->
    <div class="section-container">
      <h3 class="section-title">
        数据统计
      </h3>
      <el-row
        :gutter="20"
        class="chart-row"
      >
        <!-- 近30天新增用户数 -->
        <el-col :span="12">
          <el-card
            shadow="never"
            class="chart-card"
          >
            <div class="chart-title">
              近30天新增用户数
            </div>
            <div class="chart-container">
              <div
                ref="userChart"
                style="width: 100%; height: 300px;"
              />
            </div>
          </el-card>
        </el-col>

        <!-- 本月交易额 -->
        <el-col :span="12">
          <el-card
            shadow="never"
            class="chart-card"
          >
            <div class="chart-title">
              全年交易额趋势
            </div>
            <div class="chart-container">
              <div
                ref="transactionChart"
                style="width: 100%; height: 300px;"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      // 数据概览卡片数据
      overviewData: {
        transaction: {
          value: 59997.81,
          monthChange: -0.4,
          monthDiff: 1052,
          todayValue: 105
        },
        users: {
          value: 17584,
          monthChange: 0.52,
          todayCheckin: 67
        },
        posts: {
          value: 3184,
          monthChange: 1.2,
          pendingReview: 10
        },
        newUsers: {
          value: 28,
          monthChange: -0.8,
          yesterdayValue: 15
        }
      },

      // 30天用户增长数据
      dailyUserGrowthData: this.generateCurrentMonthUserData(),
      // [
      //   { date: '05-05', value: 15 },
      //   { date: '05-06', value: 12 },
      //   { date: '05-07', value: 9 },
      //   { date: '05-08', value: 8 },
      //   { date: '05-09', value: 6 },
      //   { date: '05-10', value: 5 },
      //   { date: '05-11', value: 0 },
      //   { date: '05-12', value: 0 },
      //   { date: '05-13', value: 0 },
      //   { date: '05-14', value: 0 },
      //   { date: '05-15', value: 0 },
      //   { date: '05-16', value: 0 },
      //   { date: '05-17', value: 0 },
      //   { date: '05-18', value: 0 },
      //   { date: '05-19', value: 0 },
      //   { date: '05-20', value: 0 },
      //   { date: '05-21', value: 0 },
      //   { date: '05-22', value: 0 },
      //   { date: '05-23', value: 0 }
      // ],

      // 本月交易数据
      monthlyTransactionData: [
        { month: '1月', value: 42000 },
        { month: '2月', value: 38000 },
        { month: '3月', value: 45000 },
        { month: '4月', value: 52000 },
        { month: '5月', value: 59847.81 },
        { month: '6月', value: 58000 },
        { month: '7月', value: 62000 },
        { month: '8月', value: 65000 },
        { month: '9月', value: 70000 },
        { month: '10月', value: 68000 },
        { month: '11月', value: 72000 },
        { month: '12月', value: 75000 }
      ],

      // 当前月份高亮标识
      currentMonth: new Date().getMonth() + 1,

      // 图表实例
      userChart: null,
      transactionChart: null,

      // 定时器
      refreshTimer: null
    }
  },

  mounted () {
    this.initCharts()
    this.setupAutoRefresh()
  },

  beforeDestroy () {
    if (this.refreshTimer) clearInterval(this.refreshTimer)
    window.removeEventListener('resize', this.handleResize)
  },

  methods: {
    // 初始化图表
    initCharts () {
      this.userChart = echarts.init(this.$refs.userChart)
      this.transactionChart = echarts.init(this.$refs.transactionChart)

      this.renderUserChart()
      this.renderTransactionChart()

      window.addEventListener('resize', this.handleResize)
    },

    // 生成当月完整用户数据（1-31日）
    generateCurrentMonthUserData () {
      const currentDate = new Date()
      const currentYear = currentDate.getFullYear()
      const currentMonth = currentDate.getMonth()
      const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()

      // 生成1-31日的日期数据
      return Array.from({ length: daysInMonth }, (_, i) => {
        const day = i + 1
        const dateStr = `${currentMonth + 1}-${day.toString().padStart(2, '0')}`

        // 模拟数据 - 实际项目中应从API获取
        return {
          date: dateStr,
          value: Math.floor(Math.random() * 20) + 5 // 随机生成5-25之间的用户数
        }
      })
    },

    // 渲染用户增长图表
    // 修改原有的renderUserChart方法
    renderUserChart () {
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            return `<div style="font-weight:bold">${params[0].axisValue}</div>
                  <div>新增用户: <span style="color:#936FDB">${params[0].data}人</span></div>`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.dailyUserGrowthData.map(item => item.date),
          axisLine: {
            lineStyle: {
              color: '#eaeaea'
            }
          },
          axisLabel: {
            color: '#999',
            // 避免日期标签过于拥挤
            interval: Math.floor(this.dailyUserGrowthData.length / 10) // 自动计算显示间隔
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#eaeaea'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        series: [{
          data: this.dailyUserGrowthData.map(item => item.value),
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#936FDB'
          },
          lineStyle: {
            width: 2,
            color: '#936FDB'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(147,111,219,0.2)' },
              { offset: 1, color: 'rgba(147,111,219,0.05)' }
            ])
          }
        }]
      }

      this.userChart.setOption(option)
    },

    // 渲染交易图表
    renderTransactionChart () {
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            return `<div style="font-weight:bold">${params[0].axisValue}</div>
                  <div>交易额: <span style="color:#FF69B4">${params[0].data.toLocaleString()}元</span></div>`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.monthlyTransactionData.map(item => item.month),
          axisLine: {
            lineStyle: {
              color: '#eaeaea'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#eaeaea'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisLabel: {
            color: '#999',
            formatter: value => {
              return value >= 10000 ? `${value / 10000}万` : value
            }
          }
        },
        series: [{
          data: this.monthlyTransactionData.map(item => item.value),
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            color: params => {
              // 当前月高亮显示
              return params.dataIndex === this.currentMonth - 1 ? '#FF69B4' : '#eaeaea'
            }
          }
        }]
      }

      this.transactionChart.setOption(option)
    },

    // 设置自动刷新
    setupAutoRefresh () {
      this.refreshTimer = setInterval(() => {
        this.simulateDataChange()
      }, 10000)
    },

    // 模拟数据变化
    simulateDataChange () {
      // 随机变化交易数据
      this.overviewData.transaction.value = this.getRandomChange(59997.81, 1000)
      this.overviewData.transaction.todayValue = this.getRandomChange(105, 20)

      // 更新用户数据时保持完整月份数据
      this.dailyUserGrowthData = this.dailyUserGrowthData.map(item => ({
        date: item.date,
        value: this.getRandomChange(item.value, 3) // 小幅波动
      }))

      this.renderUserChart()
      this.renderTransactionChart()

      // 随机变化用户数据
      this.overviewData.users.todayCheckin = this.getRandomChange(67, 10)

      // 随机变化帖子数据
      this.overviewData.posts.pendingReview = this.getRandomChange(10, 3)

      // 随机变化新增用户数据
      this.overviewData.newUsers.value = this.getRandomChange(28, 5)
      this.overviewData.newUsers.yesterdayValue = this.getRandomChange(15, 3)

      // 更新图表数据
      this.dailyUserGrowthData = this.dailyUserGrowthData.map(item => ({
        ...item,
        value: this.getRandomChange(item.value, 2)
      }))

      this.monthlyTransactionData = this.monthlyTransactionData.map(item => ({
        ...item,
        value: this.getRandomChange(item.value, 0.1)
      }))

      // 重新渲染图表
      this.renderUserChart()
      this.renderTransactionChart()
    },

    // 生成随机变化数据
    getRandomChange (base, range) {
      const change = Math.floor(Math.random() * range * 2) - range
      return Math.max(0, base + change)
    },

    // 处理窗口大小变化
    handleResize () {
      this.userChart.resize()
      this.transactionChart.resize()
    },

    // 导航到对应功能
    navigateTo (module) {
      this.$router.push(`/management/${module}`)
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: bold;
  padding-left: 10px;
}

.data-overview {
  margin-bottom: 30px;
}

.stat-card {
  height: 100%;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  transition: all 0.3s;
}

.stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-content {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.card-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0;
  color: #333;
  transition: all 0.5s ease;
}

.card-footer {
  font-size: 12px;
  color: #999;
  padding-top: 10px;
}

.card-trend {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.trend-value {
  margin: 0 5px;
  font-weight: bold;
}

.trend-text {
  color: #999;
}

.up {
  color: #f56c6c;
}

.down {
  color: #67c23a;
}

.extra-info {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
  border-top: 1px dashed #f0f0f0;
  margin-top: 8px;
}

.today-label {
  color: #999;
}

.today-value {
  font-weight: bold;
  color: #333;
}

.section-container {
  margin-bottom: 30px;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-card {
  text-align: center;
  cursor: pointer;
  padding: 15px 0;
  transition: all 0.3s;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.action-card i {
  font-size: 24px;
  margin-bottom: 10px;
  color: #409EFF;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chart-row {
  display: flex;
}

.chart-card {
  height: 380px;
  position: relative;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.chart-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 15px;
  font-weight: bold;
  padding: 15px 15px 0;
}

.chart-container {
  width: 100%;
  height: 300px;
  padding: 0 10px 15px;
  transition: all 0.5s ease;
}

@media (max-width: 992px) {
  .quick-actions .el-col {
    margin-bottom: 15px;
  }

  .chart-row .el-col {
    margin-bottom: 20px;
  }
}
</style>
